<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .calculator {
      width: 280px;
      background-color: #333;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    .display {
      background-color: #eaeaea;
      height: 60px;
      width: 100%;
      border-radius: 5px;
      margin-bottom: 15px;
      padding: 10px;
      text-align: right;
      font-size: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .keys {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
    }
    .key {
      background-color: #444;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 15px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .key:hover {
      background-color: #555;
    }
    .key:active {
      background-color: #666;
    }
    .key.operator {
      background-color: #ff9500;
    }
    .key.operator:hover {
      background-color: #ffaa33;
    }
    .key.clear {
      background-color: #ff3b30;
    }
    .key.clear:hover {
      background-color: #ff5e54;
    }
    .key.equals {
      background-color: #4cd964;
    }
    .key.equals:hover {
      background-color: #66e07d;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <div class="display" id="display">0</div>
    <div class="keys">
      <button class="key clear" onclick="clearDisplay()">C</button>
      <button class="key" onclick="appendToDisplay('(')">(</button>
      <button class="key" onclick="appendToDisplay(')')">)</button>
      <button class="key operator" onclick="appendToDisplay('/')">/</button>
      
      <button class="key" onclick="appendToDisplay('7')">7</button>
      <button class="key" onclick="appendToDisplay('8')">8</button>
      <button class="key" onclick="appendToDisplay('9')">9</button>
      <button class="key operator" onclick="appendToDisplay('*')">*</button>
      
      <button class="key" onclick="appendToDisplay('4')">4</button>
      <button class="key" onclick="appendToDisplay('5')">5</button>
      <button class="key" onclick="appendToDisplay('6')">6</button>
      <button class="key operator" onclick="appendToDisplay('-')">-</button>
      
      <button class="key" onclick="appendToDisplay('1')">1</button>
      <button class="key" onclick="appendToDisplay('2')">2</button>
      <button class="key" onclick="appendToDisplay('3')">3</button>
      <button class="key operator" onclick="appendToDisplay('+')">+</button>
      
      <button class="key" onclick="appendToDisplay('0')">0</button>
      <button class="key" onclick="appendToDisplay('.')">.</button>
      <button class="key" onclick="backspace()">←</button>
      <button class="key equals" onclick="calculate()">=</button>
    </div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // 计算器状态
    let display = document.getElementById('display');
    let currentInput = '0';
    let lastResult = null;
    
    // 显示更新
    function updateDisplay() {
      display.textContent = currentInput;
    }
    
    // 添加输入
    function appendToDisplay(value) {
      if (currentInput === '0' && value !== '.') {
        currentInput = value;
      } else {
        currentInput += value;
      }
      updateDisplay();
      saveState();
    }
    
    // 清除显示
    function clearDisplay() {
      currentInput = '0';
      updateDisplay();
      saveState();
    }
    
    // 退格
    function backspace() {
      if (currentInput.length > 1) {
        currentInput = currentInput.slice(0, -1);
      } else {
        currentInput = '0';
      }
      updateDisplay();
      saveState();
    }
    
    // 计算结果
    function calculate() {
      try {
        // 使用Function构造函数进行安全求值
        const result = new Function('return ' + currentInput)();
        lastResult = result;
        currentInput = String(result);
        updateDisplay();
        saveState();
      } catch (error) {
        currentInput = 'Error';
        updateDisplay();
        setTimeout(clearDisplay, 1500);
      }
    }
    
    // 保存状态
    async function saveState() {
      if (AppSDK.setData) {
        try {
          await AppSDK.setData('calculator_state', {
            currentInput,
            lastResult
          });
        } catch (error) {
          console.error('保存状态失败:', error);
        }
      }
    }
    
    // 加载状态
    async function loadState() {
      if (AppSDK.getData) {
        try {
          const state = await AppSDK.getData('calculator_state');
          if (state) {
            const parsedState = JSON.parse(state);
            if (parsedState && parsedState.currentInput) {
              currentInput = parsedState.currentInput;
              lastResult = parsedState.lastResult;
              updateDisplay();
            }
          }
        } catch (error) {
          console.error('加载状态失败:', error);
        }
      }
    }
    
    // 初始化
    window.addEventListener('load', () => {
      // 尝试加载之前的状态
      loadState();
      
      // 键盘支持
      document.addEventListener('keydown', (event) => {
        const key = event.key;
        if (/[0-9\+\-\*\/\.\(\)]/.test(key)) {
          appendToDisplay(key);
        } else if (key === 'Enter' || key === '=') {
          calculate();
        } else if (key === 'Backspace') {
          backspace();
        } else if (key === 'Escape') {
          clearDisplay();
        }
      });
    });
  </script>
</body>
</html> 